import { cn } from '@/utils/cn-merge';
import { Splitter as AntdSplitter } from 'antd';
import { SvgIcon } from '@/components/icon';
import { DEFAULT_ICON_SIZE } from '@/common';
import React from 'react';

interface CustomSplitterProps {
  className?: string;
  split?: 'horizontal' | 'vertical';
  children?: React.ReactNode;
  [key: string]: any;
}

interface SplitterPanelProps {
  defaultSize?: number | string;
  min?: number | string;
  max?: number | string;
  children?: React.ReactNode;
  className?: string;
  [key: string]: any;
}

const SplitterPanel: React.FC<SplitterPanelProps> = ({ children, ...props }) => {
  return <AntdSplitter.Panel {...props}>{children}</AntdSplitter.Panel>;
};

export const Splitter = ({ 
  className, 
  split = 'horizontal',
  children,
  ...props 
}: CustomSplitterProps) => {
  // 根据分割方向选择对应的图标
  const getSplitIcon = () => {
    if (split === 'horizontal') {
      return <SvgIcon icon="ai-orch-split-horizontal" size={DEFAULT_ICON_SIZE} />;
    } else {
      return <SvgIcon icon="ai-orch-split-vertical" size={DEFAULT_ICON_SIZE} />;
    }
  };

  return (
    <AntdSplitter
      className={className}
      layout={split}
      {...props}
    >
      {children || getSplitIcon()}
    </AntdSplitter>
  );
};

// 添加 Panel 属性到 Splitter
Splitter.Panel = SplitterPanel;

export default Splitter; 